<template>
  <div class="app-container flex">
    <div class="left" id="left">
      <!-- <img src="@/assets/imgs/dashboard/jiantou.png" alt="" class="jiantou" @click="jump_target_position_at_map" /> -->
      <img src="@/assets/imgs/dashboard/jiantou.png" alt="" class="jiantou" @click="transform" v-if="isExpansion" />
      <img src="@/assets/imgs/dashboard/jiantou.png" alt="" class="jiantou jiantou-toL" @click="transform(1)" v-else />

      <el-cascader
        clearable
        collapse-tags
        ref="cascader"
        class="cascader"
        placeholder="请选择行业"
        v-model="cascader_value"
        :show-all-levels="false"
        :options="cascader_options"
        @change="cascader_change"
        :props="{ multiple: true, expandTrigger: 'hover' }"
      ></el-cascader>

      <div class="dash-select">
        <a-select
          allowClear
          showSearch
          :open="false"
          placeholder="请输入场所名称或关键字搜索"
          @focus="showOptions = true"
          @blur="select_blur"
          @search="information_info_change"
        >
        </a-select>
        <div class="select-panel" v-show="showOptions">
          <a-empty style="padding-top: 0.2rem" v-if="is_options_empty">
            <span slot="description" style="color: #62affa"> 暂无场所! </span>
          </a-empty>

          <div
            class="select-option-wrap flex cursor"
            v-for="(item, index) in place_options"
            :key="index"
            @click="jump_target_position_at_map(item)"
          >
            <div class="left-place-info f1 flex column justify-around">
              <div class="place-name fz-14">{{ index + 1 }}.{{ item.name }}</div>
              <div class="jurisdictional-name fz-14">{{ item.jurisdictionName }}</div>
              <div class="place-address text-overflow">{{ item.addressDetail }}</div>
            </div>
            <div class="right-place-img">
              <img :src="imgPrefix + item.doorheadImages" />
            </div>
          </div>
        </div>
      </div>

      <el-select
        class="ragion-select"
        allowClear
        placeholder="请选择辖区"
        v-if="policeAgencyType == 1"
        v-model="user_city"
      >
        <el-option
          v-for="(item, index) in user_city_options"
          :key="index"
          :value="item.id"
          :label="item.policeAgencyName"
        ></el-option>
      </el-select>

      <div class="count-card flex column common-bgc mb-5">
        <custitle count="01" title="行业场所总数" unit="家" />
        <div class="bot f1 flex align-center justify-between">
          <div class="cus-hr"></div>
          <img src="@/assets/imgs/dashboard/changsuo.png" alt="" />
          <CountFlop :val="handelPadStart(statisticsCountMap.companyCount, 6)" />
        </div>
      </div>

      <div class="left-mid flex column common-bgc mb-5">
        <custitle count="02" title="从业人员概况" unit="人" />
        <div class="bot f1">
          <div class="cus-hr"></div>

          <div class="employeeCount flex align-center">
            <div class="icon flex align-center justify-center"><span /></div>
            <div style="margin: 0 10px">从业人员总数:</div>
            <countTo
              class="count-to"
              style="color: #01d8ff"
              :startVal="handelReplace(hotelWorkPersonMap.totalCount)"
              :endVal="hotelWorkPersonMap.totalCount || 0"
              :duration="1000"
            ></countTo>
          </div>

          <div class="datav-wrap flex">
            <div class="left-chart-wrap flex align-center justify-center">
              <div class="chart-outline flex">
                <dv-active-ring-chart :config="workPersonConfig" class="f1" />
              </div>
            </div>
            <div class="right-info-wrap flex column justify-around">
              <div class="flex align-center">
                <div class="bg-current bg-18 flex justify-around align-center">
                  <div class="title">18-35岁</div>
                  <!-- <div class="count">80145</div> -->
                  <countTo
                    class="count"
                    :startVal="handelReplace(hotelWorkPersonMap.smallCount)"
                    :endVal="hotelWorkPersonMap.smallCount || 0"
                    :duration="1000"
                    separator=""
                  ></countTo>
                </div>
                <span class="percentage-18 count">
                  <!-- {{ (hotelWorkPersonMap.smallCount / personCount).toFixed(0) }} -->
                  {{ +((hotelWorkPersonMap.smallCount / personCount) * 100).toFixed(0) || 0 }}
                  %</span
                >
              </div>
              <div class="flex align-center">
                <div class="bg-current bg-45 flex justify-around align-center">
                  <div class="title">35-60岁</div>
                  <countTo
                    class="count"
                    :startVal="handelReplace(hotelWorkPersonMap.centreCount)"
                    :endVal="hotelWorkPersonMap.centreCount || 0"
                    :duration="1000"
                    separator=""
                  ></countTo>
                </div>
                <!-- {{ (hotelWorkPersonMap.centreCount / personCount).toFixed(0) }} -->
                <span class="percentage-45 count">
                  {{ +((hotelWorkPersonMap.centreCount / personCount) * 100).toFixed(0) || 0 }}%</span
                >
              </div>
              <div class="flex align-center">
                <div class="bg-current bg-61 flex justify-around align-center">
                  <div class="title">61岁以上</div>
                  <countTo
                    class="count"
                    :startVal="handelReplace(hotelWorkPersonMap.bigCount)"
                    :endVal="hotelWorkPersonMap.bigCount || 0"
                    :duration="1000"
                    separator=""
                  ></countTo>
                </div>
                <!-- {{ (hotelWorkPersonMap.bigCount / personCount).toFixed(0) }} -->
                <span class="percentage-61 count">
                  {{ +((hotelWorkPersonMap.bigCount / personCount) * 100).toFixed(0) || 0 }}%</span
                >
              </div>
            </div>
          </div>

          <div class="percentage-wrap">
            <div class="female-wrap flex align-center">
              <div class="f flex align-center">
                <div class="icon-f flex align-center justify-center"><span /></div>
                <div class="lable">女性：</div>
                <div class="img-wrap" id="female"></div>
                <!-- <div class="count f1">8784</div> -->
                <countTo
                  class="count f1"
                  :startVal="handelReplace(hotelWorkPersonMap.womanCount)"
                  :endVal="hotelWorkPersonMap.womanCount || 0"
                  :duration="1000"
                  separator=""
                ></countTo>
              </div>
              <div class="percentage">
                {{ +((hotelWorkPersonMap.womanCount / genderCount) * 100).toFixed(0) || 0 }}%
              </div>
            </div>
            <div class="male-wrap flex align-center">
              <div class="f m flex align-center">
                <div class="icon-f icon-m flex align-center justify-center"><span /></div>
                <div class="lable">男性：</div>
                <div class="img-wrap img-male" id="male"></div>
                <!-- <div class="count f1">784</div> -->
                <countTo
                  class="count f1"
                  :startVal="handelReplace(hotelWorkPersonMap.manCount)"
                  :endVal="hotelWorkPersonMap.manCount || 0"
                  :duration="1000"
                  separator=""
                ></countTo>
              </div>
              <div class="percentage">{{ +((hotelWorkPersonMap.manCount / genderCount) * 100).toFixed(0) || 0 }}%</div>
            </div>
          </div>
        </div>
      </div>

      <div class="left-bot flex column common-bgc">
        <custitle count="03" title="各行业场所数据统计" unit="家" />
        <div class="bot f1 flex align-center justify-between">
          <div class="cus-hr"></div>
          <dv-scroll-ranking-board
            :config="industryCompanyCountList"
            style="padding: 10px; color: #000; max-height: 276px"
          />
        </div>
      </div>
    </div>
    <div class="mid f1"></div>
    <!-- <div class="mid f1 flex justify-between" id="mid">
      <div class="click-wrap flex column align-center" @click="clickSelectAllBtn">
        <img v-if="clickType == 0" src="@/assets/imgs/dashboard/select_all.png" alt="" />
        <img v-else src="@/assets/imgs/dashboard/all.png" alt="" />
        <div class="industry-name" :class="clickType == 0 ? 'active' : ''">全部场所</div>
      </div>
      <div
        class="click-wrap flex column align-center"
        v-for="(item, index) in informationList"
        :key="index"
        @click="clickInformationBtn(item, index + 1)"
      >
        <img v-if="clickType == index + 1" :src="imgPrefix + item.webHomeClickUrl" alt="" />
        <img v-else :src="imgPrefix + item.webHomeUrl" alt="" />
        <div class="industry-name" :class="clickType == index + 1 ? 'active' : ''">{{ item.informationName }}</div>
      </div>
    </div> -->

    <div class="right" id="right">
      <div class="click-btn" v-if="layerType > 0" @click="handelBackMapLayer"></div>
      <div class="click-btn click-btn2" v-if="showPolyon && !hiddenPButton" @click="handelClearPolygon"></div>
      <div class="click-btn click-btn3" v-if="!showPolyon && !hiddenPButton" @click="handelDrawPolygon"></div>

      <div class="count-card flex column common-bgc mb-5">
        <custitle count="04" title="注册民警总数" unit="人" />
        <div class="bot f1 flex align-center justify-between">
          <div class="cus-hr"></div>
          <img src="@/assets/imgs/dashboard/minjing.png" alt="" />
          <CountFlop :val="handelPadStart(statisticsCountMap.policeUserCount, 6)" />
        </div>
      </div>

      <div class="right-mid flex column common-bgc mb-5">
        <custitle
          count="05"
          title="检查次数统计"
          unit="次"
          :isShowBtn="true"
          @clickWeek="clickCheckCount('week')"
          @clickMounth="clickCheckCount('month')"
        />
        <div class="bot f1 flex align-center justify-between">
          <div class="cus-hr"></div>
          <e-charts :options="checkCountOption" className="checkCountOption" class="f1"></e-charts>
        </div>
      </div>

      <div class="right-mid2 flex column common-bgc mb-5">
        <custitle
          count="06"
          title="检查结果统计"
          unit="次"
          :isShowBtn="true"
          @clickWeek="clickCheckResult('week')"
          @clickMounth="clickCheckResult('month')"
        />
        <div class="bot f1 flex">
          <div class="cus-hr"></div>
          <div class="left f1 flex column">
            <div class="top-title flex align-center">
              <div class="icon flex align-center justify-center"><span /></div>
              <div style="margin-left: 5px">检查总数：</div>
              <countTo
                class="num"
                :startVal="handelReplace(checkResult.checkCount)"
                :endVal="checkResult.checkCount || 0"
                :duration="1000"
              ></countTo>
            </div>

            <div class="bottom-container f1 flex">
              <div class="qualifiedVariable f1 flex column align-center justify-around">
                <div class="chart-wrap">
                  <a-progress
                    type="circle"
                    :percent="Number(((checkResult.checkQualifiedCount / checkResult.checkCount) * 100).toFixed(0))"
                    :strokeWidth="10"
                    trailColor="#0075bf"
                    strokeColor="#00ff96"
                  >
                    <template #format="percent">
                      <span>{{ percent }}%</span>
                    </template>
                  </a-progress>
                </div>
                <div class="content">检查合格</div>
                <div class="qualifiedVariable-num">{{ checkResult.checkQualifiedCount }}</div>
              </div>
              <div class="unqualifiedVariable f1 flex column align-center justify-around">
                <div class="chart-wrap">
                  <a-progress
                    type="circle"
                    :percent="Number(((checkResult.checkFailedCount / checkResult.checkCount) * 100).toFixed(0))"
                    :strokeWidth="10"
                    trailColor="#0075bf"
                    strokeColor="#d5d81b"
                  >
                    <template #format="percent">
                      <span>{{ percent }}%</span>
                    </template>
                  </a-progress>
                </div>
                <div class="content">检查不合格</div>
                <div class="unqualifiedVariable-num">{{ checkResult.checkFailedCount }}</div>
              </div>
            </div>
          </div>
          <div class="right f1 flex column">
            <div class="top-title flex align-center">
              <div class="icon flex align-center justify-center"><span /></div>
              <div style="margin: 0 10px">复查总数：</div>
              <countTo
                class="num"
                :startVal="handelReplace(checkResult.reviewCount)"
                :endVal="checkResult.reviewCount || 0"
                :duration="1000"
              ></countTo>
            </div>

            <div class="bottom-container f1 flex">
              <div class="qualifiedVariable f1 flex column align-center justify-around">
                <div class="chart-wrap">
                  <a-progress
                    type="circle"
                    :percent="Number(((checkResult.reviewQualifiedCount / checkResult.reviewCount) * 100).toFixed(0))"
                    :strokeWidth="10"
                    trailColor="#0075bf"
                    strokeColor="#00ff96"
                  >
                    <template #format="percent">
                      <span>{{ percent }}%</span>
                    </template>
                  </a-progress>
                </div>
                <div class="content">复查合格</div>
                <div class="qualifiedVariable-num">{{ checkResult.reviewQualifiedCount }}</div>
              </div>
              <div class="unqualifiedVariable f1 flex column align-center justify-around">
                <div class="chart-wrap">
                  <a-progress
                    type="circle"
                    :percent="Number(((checkResult.reviewFailedCount / checkResult.reviewCount) * 100).toFixed(0))"
                    :strokeWidth="10"
                    trailColor="#0075bf"
                    strokeColor="#d5d81b"
                  >
                    <template #format="percent">
                      <span>{{ percent }}%</span>
                    </template>
                  </a-progress>
                </div>
                <div class="content">复查不合格</div>
                <div class="unqualifiedVariable-num">{{ checkResult.reviewFailedCount }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="right-bot flex column common-bgc">
        <custitle
          count="07"
          title="事件统计"
          unit="次"
          :isShowBtn="true"
          @clickWeek="clickEventCount('week')"
          @clickMounth="clickEventCount('month')"
        />
        <div class="bot f1 flex align-center justify-between">
          <div class="cus-hr"></div>
          <e-charts :options="eventCountOption" className="eventCountOption" class="f1"></e-charts>
        </div>
      </div>
    </div>

    <!--  <tencent
      ref="tencent"
      @changeLayer="changeLayer"
      @isShowPolyon="isShowPolyon"
      @hiddenPolyonButton="hiddenPolyonButton"
      :informationId.sync="industryIds"
    /> -->
  </div>
</template>

<script>
import { getAction } from '@/api/manage'
import countTo from 'vue-count-to'
import CountFlop from './components/countTo.vue'
import custitle from './components/title.vue'
import eCharts from '@/components/eCharts'
import tencent from './components/tencent.vue'
import { comMethods } from '@/mixins/comMethods'
import { eventCountListData, checkCountData } from './echartsData'
import { Cascader, Select, Option } from 'element-ui'
export default {
  name: 'checkCountData',
  components: {
    CountFlop,
    custitle,
    countTo,
    eCharts,
    tencent,
    'el-cascader': Cascader,
    'el-select': Select,
    'el-option': Option,
  },
  mixins: [comMethods],
  watch: {
    // $route: {
    //   handler(val, oldval) {
    //     if (Object.keys(val.query).length == 0 && Object.keys(oldval.query).length == 0) {
    //       this.$refs.tencent.initPoliceAgencyInfo()
    //     }
    //   },
    //   deep: true,
    // },
  },
  data() {
    return {
      statisticsCountMap: {}, // *	1.企业数 4.民警数

      hotelWorkPersonMap: {}, // *	2.从业人员概况
      workPersonConfig: {}, // 从业人员 datav 配置
      personCount: 0, // 从业人员总数
      genderCount: 0, // 性别统计

      industryCompanyCountList: {}, // * 3.各个行业企业数统计

      checkCountMap: {}, //	* 5.检查次数统计 7天 30天
      checkCountOption: {}, // echarts 对象

      checkStatisticsCountMap: {}, // *	6.检查数量统计 7天 30天
      checkResult: {}, // 用于获取 周数据或 天数据

      eventCountMap: {}, // *	7.事件统计（事件管理下4个分类 数）7天 30天
      eventCountOption: {}, // echarts 对象

      queryParams: {
        policeAgencyId: '',
        industryIds: '',
      },
      imgPrefix: '',

      // clickType: 0,
      industryIds: '',

      isExpansion: true,
      layerType: 0,
      showPolyon: false,
      hiddenPButton: true,

      cascader_value: [],
      cascader_options: [],

      place_options: [],
      showOptions: false,
      is_options_empty: true,

      policeAgencyType: '',
      user_city: '',
      user_city_options: [],
    }
  },
  activated() {
    this.get_tree_data()

    let policeAgencyType = JSON.parse(localStorage.getItem('pro__Login_Userinfo')).value.policeAgencyType
    this.policeAgencyType = policeAgencyType
    if (policeAgencyType == 1) this.get_user_city_list()
  },
  methods: {
    // * 跳转页面
    clickCheckCount(type) {
      if (type === 'week') {
        this.checkCountOption = checkCountData(this.checkCountMap.weekTaskList)
      } else if (type === 'month') {
        this.checkCountOption = checkCountData(this.checkCountMap.monthTaskList)
      }
    },
    clickCheckResult(type) {
      if (type === 'week') {
        this.checkResult = this.checkStatisticsCountMap.weekTaskMap
      } else if (type === 'month') {
        this.checkResult = this.checkStatisticsCountMap.monthTaskMap
      }
    },
    clickEventCount(type) {
      if (type === 'week') {
        this.eventCountOption = eventCountListData(this.eventCountMap.weekEventList)
      } else if (type === 'month') {
        this.eventCountOption = eventCountListData(this.eventCountMap.monthEventList)
      }
    },

    // clickSelectAllBtn() {
    //   this.clickType = 0
    //   this.informationId = ''
    // this.queryParams.industryIds = ''
    // this.initData()
    // },

    // clickInformationBtn(item, index) {
    //   this.clickType = index
    //   this.informationId = item.id
    // console.log(item, index)
    // this.queryParams.industryIds = item.id
    // this.initData()
    // },

    // * 选点跳转地图
    jump_target_position_at_map(item) {
      this.showOptions = false
      this.$refs.tencent.jump_position_at_map(item)
    },

    select_blur() {
      this.place_options = []
      this.is_options_empty = true
      this.showOptions = false
    },

    // * 场所搜索变化时触发
    async information_info_change(e) {
      this.is_options_empty = true
      let { result } = await getAction('/sys/statistics/company_page', {
        industryIds: this.industryIds,
        search: e,
        policeAgencyId: this.user_city,
        pageSize: 99999,
      })

      this.place_options = result.records
      if (this.place_options.length !== 0) this.is_options_empty = false
    },

    async get_user_city_list() {
      let { result } = await getAction('/sys/police_agency/user_city_police_tree')
      this.user_city_options = result
    },

    handelReplace(target) {
      if (target != undefined) {
        let str = target.toString().replace(/./g, () => {
          return '9'
        })
        return Number(str)
      }
    },

    handelPadStart(pm1, pm2) {
      if (pm1 !== undefined) {
        return pm1.toString().padStart(pm2, '0')
      }
    },

    changeLayer(id, layerType) {
      this.queryParams.policeAgencyId = id
      this.layerType = layerType
      this.initData()
    },

    handelBackMapLayer() {
      this.$refs.tencent.handelBackMapLayer()
    },

    isShowPolyon() {
      this.showPolyon = true
    },

    hiddenPolyonButton(bo) {
      this.hiddenPButton = bo
    },

    handelDrawPolygon() {
      this.showPolyon = true
      this.$refs.tencent.clearPolygon()
      this.$refs.tencent.parentComponentDrawPolygon()
    },

    handelClearPolygon() {
      this.showPolyon = false
      this.$refs.tencent.clearPolygon()
    },

    async initData() {
      let {
        result: {
          statisticsCountMap,
          hotelWorkPersonMap,
          industryCompanyCountList,
          checkCountMap,
          checkStatisticsCountMap,
          eventCountMap,
        },
      } = await getAction('/sys/statistics/total', this.queryParams)

      // !	1.企业数 4.民警数
      // statisticsCountMap.companyCount = 99999
      // statisticsCountMap.policeUserCount = 99999
      this.statisticsCountMap = statisticsCountMap

      // ! 	2.从业人员概况
      this.employeeProfile(hotelWorkPersonMap)

      // ! 3.各个行业企业数统计
      this.getIndustryCompanyCount(industryCompanyCountList)

      // ! 检查次数统计
      this.checkCountMap = checkCountMap
      this.checkCountOption = checkCountData(checkCountMap.weekTaskList)

      // ! 检查结果统计
      this.checkStatisticsCountMap = checkStatisticsCountMap
      this.checkResult = checkStatisticsCountMap.weekTaskMap

      // ! 事件统计
      this.eventCountMap = eventCountMap
      this.eventCountOption = eventCountListData(eventCountMap.weekEventList)
    },

    // ! 	2.从业人员概况
    employeeProfile(hotelWorkPersonMap) {
      // if (hotelWorkPersonMap.totalCount == 0) {
      //   hotelWorkPersonMap.smallCount = 1
      // }
      // if (hotelWorkPersonMap.manCount == 0 && hotelWorkPersonMap.womanCount == 0) {
      //   hotelWorkPersonMap.manCount = 1
      // }
      // hotelWorkPersonMap.totalCount = 9999
      // hotelWorkPersonMap.smallCount = 999
      // hotelWorkPersonMap.centreCount = 999
      // hotelWorkPersonMap.bigCount = 999

      // hotelWorkPersonMap.manCount = 1398
      // hotelWorkPersonMap.womanCount = 1398
      this.hotelWorkPersonMap = hotelWorkPersonMap

      let cusEnum = {
        smallCount: '0-35岁',
        centreCount: '36-60岁',
        bigCount: '61岁以上',
      }

      let data = []
      for (const key in hotelWorkPersonMap) {
        if (cusEnum[key] !== undefined) {
          let temp = { name: cusEnum[key], value: hotelWorkPersonMap[key] }
          data.push(temp)
          // console.log(cusEnum[key], hotelWorkPersonMap[key], 'key')
          this.personCount += hotelWorkPersonMap[key]
        }
      }

      this.workPersonConfig = {
        data,
        radius: '88%',
        activeRadius: '85%',
        lineWidth: 14,
        activeTimeGap: 3000, //切换间隔
        color: ['#1388ff', '#00ff96', '#00fcff'],
        digitalFlopStyle: {
          fontSize: 25,
          fill: '#1388ff',
        },
      }

      // hotelWorkPersonMap.manCount = 1398
      // hotelWorkPersonMap.womanCount = 1398
      this.genderCount = hotelWorkPersonMap.manCount + hotelWorkPersonMap.womanCount
      this.$nextTick(() => {
        let male = document.getElementById('male')
        console.log(male)
        let female = document.getElementById('female')
        let amale = 1.4 * (hotelWorkPersonMap.manCount / this.genderCount)
        let bfemale = 1.4 * (hotelWorkPersonMap.womanCount / this.genderCount)
        male.style.width = `${amale}rem`
        female.style.width = `${bfemale}rem`
      })
    },

    // ! 3.各个行业企业数统计
    getIndustryCompanyCount(industryCompanyCountList) {
      if (industryCompanyCountList.length == 0) {
        this.industryCompanyCountList = { data: [{ name: '暂无', value: 0 }] }
      } else {
        let data = []
        industryCompanyCountList.forEach((item) => {
          let obj = {}
          obj.name = item.informationName
          obj.value = item.count
          data.push(obj)
        })
        this.industryCompanyCountList = { data }
        console.log(this.industryCompanyCountList)
      }
    },

    transform(type) {
      this.isExpansion = !this.isExpansion

      const left = document.getElementById('left')
      const right = document.getElementById('right')

      const leftWidth = left.clientWidth + 12
      const rightWidth = right.clientWidth + 12

      const leftTransform = type === 1 ? { x: 0 } : { x: -leftWidth }
      const rightTransform = type === 1 ? { x: 0 } : { x: rightWidth }

      this.$gsap.to(left, leftTransform)
      this.$gsap.to(right, rightTransform)
    },

    // * 获取行业树
    async get_tree_data() {
      let { result } = await getAction('/industry/information/tree')

      let final_result = this.process_cascader_data(result)
      this.cascader_options = final_result
    },

    // * 处理行业树 将children:[] 项过滤
    process_cascader_data(data) {
      if (!data || !Array.isArray(data)) {
        return null
      }
      return data.map((item) => {
        const processedItem = {
          parentId: item.parentId,
          label: item.informationName,
          value: item.id,
          children: item.children.length > 0 ? item.children : null, // 将 children 设置为 null
        }

        if (item.children && item.children.length > 0) {
          processedItem.children = this.process_cascader_data(item.children) // 递归处理子节点
        }

        return processedItem
      })
    },

    // * 级联选择框变化时触发
    cascader_change(e) {
      const click_node_id_list = []
      this.$refs.cascader.getCheckedNodes().forEach((item) => {
        click_node_id_list.push(item.value)
      })

      let informationIds = click_node_id_list.join(',')
      this.queryParams.industryIds = this.industryIds = informationIds
      this.initData()
    },
  },
  destroyed() {},
}
</script>
<style scoped lang="less">
@import './style.less';

/deep/ .ant-select {
  width: 100%;
  color: #047ade;
}
/deep/ .ant-select-selection--single {
  height: 40px;
  line-height: 40px;
  border: 1px solid #244563 !important;
  background: rgba(6, 98, 205, 0.8);
  .ant-select-selection__rendered {
    line-height: 40px;
  }

  .ant-select-selection__placeholder {
    color: #79c5ff;
  }

  .ant-select-arrow-icon {
    color: #00ff95;
  }

  .ant-select-selection__clear {
    color: #79c5ff;
    background: rgba(6, 98, 205, 0.8);
  }
}

.cascader {
  position: absolute;
  right: -2.4rem;
  top: 0.1rem;
  cursor: pointer;
}

.dash-select {
  position: absolute;
  right: -6.6rem;
  top: 0.1rem;
  width: 4rem;

  .select-panel {
    position: absolute;
    left: 0;
    width: 4rem;

    overflow: scroll;

    height: 4.18rem;
    background: #105cc4;
    border: 1px solid #047ade;

    .select-option-wrap {
      padding: 0.1rem 0;
      margin: 0 22px;
      border-bottom: 1px solid #0b68ce;

      &:last-child {
        border-bottom: none;
      }
      .left-place-info {
        color: #7da9e7;
        min-width: 0;
        .place-name {
          font-size: 0.16rem;
          font-weight: 500;
          color: #cce9ff;
        }

        .fz-14 {
          font-size: 0.14rem;
        }
      }
      .right-place-img > img {
        width: 100px;
        height: 90px;
        border-radius: 4px;
      }
    }
  }
}

.ragion-select {
  position: absolute;
  right: -8rem;
  top: 0.1rem;
  width: 1.2rem;
}

.app-container {
  position: relative;
  overflow: hidden;
  font-family: PingFang SC;

  padding: 10px 16px;

  .left,
  .right {
    z-index: 9;
    width: 3.8rem;
  }
  // .mid {
  //   z-index: 9;
  //   margin: 0 20px;
  //   padding: 0 60px;
  //   height: 66px;
  //   background: url('~@/assets/imgs/dashboard/bg.png') no-repeat;
  //   // overflow-x: scroll;
  //   // overflow-y: auto;
  //   overflow: visible;
  //   &::-webkit-scrollbar {
  //     display: none;
  //   }

  //   .click-wrap {
  //     transform: translateY(-50px);
  //     cursor: pointer;
  //     font-size: 14px;
  //     font-weight: 500;
  //     color: #01d8ff;
  //     img {
  //       width: 75px;
  //       height: 87px;
  //     }

  //     .active {
  //       color: #00ff96;
  //     }
  //   }
  // }
  .left {
    position: relative;
    .jiantou {
      position: absolute;
      top: 0;
      right: -0.35rem;
      z-index: 9999;
      cursor: pointer;
    }
    .jiantou-toL {
      transform: rotateY(180deg);
    }

    .left-mid {
      height: 375px;
      .bot {
        padding: 0 20px;
      }

      .employeeCount {
        height: 60px;
        // color: #1388ff;
        color: #fff;
        border-bottom: 0.02rem solid #026bdb;
        // border-image: linear-gradient(90deg, #f6d365, #fda085);
      }

      .datav-wrap {
        height: 180px;

        .left-chart-wrap {
          flex: 4;
          .chart-outline {
            width: 136px;
            height: 136px;
          }

          /deep/ .active-ring-name {
            font-size: 18px !important;
            margin-top: 10px;
            font-family: DIN;
            font-weight: 500;
            color: #1177e0;
            line-height: 16px !important;
          }
        }

        .right-info-wrap {
          flex: 6;
          padding: 20px 0;
          // background: #fff;

          .bg-current {
            width: 125px;
            height: 24px;
            margin: 0 10px 0 20px;
          }

          .title {
            font-size: 14px;
            font-weight: 400;
          }
          .count {
            font-size: 18px;
            font-family: DIN;
            font-weight: 500;
          }
          .percentage-18 {
            color: #00ff96;
          }
          .percentage-45 {
            color: #00fcff;
          }
          .percentage-61 {
            color: #1388ff;
          }
          .bg-18 {
            color: #00ff95;
            background: rgba(21, 242, 153, 0.2);
            border-left: 0.04rem solid #00ff95;
          }
          .bg-45 {
            color: #00fcff;
            background: rgba(0, 252, 255, 0.2);
            border-left: 0.04rem solid #00fcff;
          }
          .bg-61 {
            color: #1388ff;
            background: rgba(19, 136, 255, 0.2);
            border-left: 0.04rem solid #1388ff;
          }
        }
      }

      .percentage-wrap {
        height: 100px;
        font-size: 18px;
        font-family: DIN;
        font-weight: 500;

        .female-wrap {
          color: #fc03ff;
        }
        .male-wrap {
          color: #00fcff;
          margin-top: 16px;
        }

        .icon-f {
          width: 12px;
          height: 12px;
          margin-right: 0.05rem;
          border: 0.01rem solid #f804fc;
          span {
            width: 6px;
            height: 6px;
            background: #fc03ff;
          }
        }
        .icon-m {
          border: 0.01rem solid #00fcff;
          span {
            background: #00fcff;
          }
        }

        .f {
          font-size: 14px;
          font-weight: bold;
          width: 280px;
          height: 32px;
          padding: 0 10px;
          margin-right: 15px;
          background: rgba(252, 3, 255, 0.5);
        }
        .m {
          background: rgba(0, 252, 255, 0.5);
        }

        .count {
          font-size: 18px;
          font-family: DIN;
          font-weight: 500;
          text-align: right;
        }
        .img-wrap {
          height: 20px;
          background: url('~@/assets/imgs/dashboard/female.png') repeat-x;
          // background-size: 100% auto;
        }
        .img-male {
          background: url('~@/assets/imgs/dashboard/male.png') repeat-x;
        }
      }
    }

    .left-bot {
      height: 310px;
      overflow: hidden;

      /deep/ .ranking-info {
        font-size: 14px;
        line-height: 16px;
        font-weight: 400;
        // color: #1388ff;
        color: #fff;
        .rank {
          font-size: 16px;
          font-family: Acens;
          color: #fff;
        }
        .info-name {
          flex: auto;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          margin-left: 0.05rem;
        }
        .ranking-value {
          font-size: 18px;
          font-family: DIN;
          font-weight: 500;
          color: #1388ff;
          // line-height: .66rem;
        }
      }

      /deep/ .ranking-column {
        border-bottom: 2px solid #13bfff;
        .inside-column {
          background: #13bfff;
          .shine {
            -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
            background: radial-gradient(#1370fb 5%, transparent 80%);
            -webkit-animation: shine 3s ease-in-out infinite alternate;
            animation: shine 3s ease-in-out infinite alternate;
          }
        }
      }
    }
  }

  .right {
    position: relative;
    .click-btn {
      position: absolute;
      right: 400px;
      // bottom: 300px;
      cursor: pointer;
      width: 152px;
      height: 56px;
      background: url('~@/assets/imgs/dashboard/upLayer.png') no-repeat;
      background-size: 100% 100%;
      z-index: 9999;
    }

    .click-btn2 {
      top: 60px;
      background: url('~@/assets/imgs/dashboard/clearPolygon.png') no-repeat;
      background-size: 100% 100%;
    }

    .click-btn3 {
      top: 60px;
      background: url('~@/assets/imgs/dashboard/drawPolygon.png') no-repeat;
      background-size: 100% 100%;
    }
    .right-mid {
      height: 220px;
    }
    .right-mid2 {
      height: 240px;
      .bot {
        padding: 0 20px;
        color: #fff;
        // color: #009cff;

        .top-title {
          height: 50px;
          border-bottom: 0.01rem dashed #02528b;
        }
        .num {
          font-size: 20px;
          font-family: DIN;
          font-weight: 500;
          color: #00fcff;
        }

        .chart-wrap {
          width: 67px;
          height: 67px;
          border: 2px solid #0273c3;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;

          /deep/ .ant-progress-inner {
            width: 50px !important;
            height: 50px !important;
          }
        }

        .bottom-container {
          padding: 10px 0;
        }

        .qualifiedVariable {
          height: 100%;

          .qualifiedVariable-num {
            font-size: 16px;
            font-family: DIN;
            font-weight: 500;
            color: #00ff96;
          }

          /deep/ .ant-progress-text {
            font-size: 16px;
            font-weight: 500;
            color: #00fcff;
            line-height: 16px;
          }
        }

        .unqualifiedVariable {
          height: 100%;

          .unqualifiedVariable-num {
            font-size: 16px;
            font-family: DIN;
            font-weight: 500;
            color: #d5d81b;
          }

          /deep/ .ant-progress-text {
            font-size: 16px;
            font-weight: 500;
            color: #d5d81b;
            line-height: 16px;
          }
        }
        .left {
          padding-right: 12px;
        }

        .right {
          padding-left: 12px;
          border-left: 0.01rem solid;
          border-image: linear-gradient(to bottom, #0a2f56, #0e5399, #0c457f) 1 1 1 1;
        }
      }
    }

    .right-bot {
      height: 220px;
    }
  }
}
</style>
